<template>
  <div>
    <div class="header">
      <div class="header-top">
        <h1>猎鹄科技</h1>
      </div>

      <div class="header-bottom">
        <div class="header-bottom-left">
          <button @click="changeView()" :style="count==0?'color:red;':'color:#a7c7e3;'">系统主页</button>
          <button @click="toResume">人才储备</button>
        </div>
        <div class="header-bottom-right">
          <span class="el-icon-guide"></span>
          <span @click="logOut">退出</span>
        </div>


      </div>
    </div>
    <template v-if="count===1">
      <div class="roterAll">

        <transition enter-active-class="animate__animated animate__fadeIn">
          <router-view/>
        </transition>

      </div>
    </template>
    <template v-if="count===0">
      <div class="  roterAll-change">
        <div class="PageBox">
          <homePage/>
        </div>
      </div>
    </template>

    <div class="footer">
      <span>今天是公立</span>
      <span>{{ Today }}</span>
      <span>农历</span>
      <span>{{ newmonthCn }}</span>
      <span>{{ newdayCn }}</span>
    </div>

  </div>
</template>

<script>
import homePage from "@/components/HomePage/HomePage";
import axios from "axios";

import {mapState, mapMutations} from 'vuex'
import {solar2lunar} from 'solarlunar';

export default {
  name: "Content",
  data() {
    return {
      Today: '',
      newmonthCn: '',
      newdayCn: '',
    }
  },
  components: {
    homePage,
  },
  props: {},
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['changEve']),
    //退出函数
    logOut() {

       //清楚菜单
      localStorage.removeItem('loginDataAll')
      //清除本地token值
      localStorage.removeItem('token')

      //跳转到登录页面
      this.$router.push('/longin')

    },
    //点击View的背景改变
    changeView() {
      this.changEve()

    },
    //今天日期
    toDay() {
      const now = this.$dayjs();
      const {monthCn, dayCn} = solar2lunar(
          now.year(),
          now.month() + 1,
          now.date(),
      );
      console.log(monthCn, dayCn);
      this.newmonthCn = monthCn
      this.newdayCn = dayCn

      this.Today = this.$dayjs().format('YYYY-MM-DD')

    },
    //到人才储备页面
    toResume() {
      this.$router.push({
        name: 'talentLogin'
      })
    },

  },
  created() {
    this.toDay()
    this.changEve()
  },

}
</script>

<style lang="less" scoped>
.header {
  border-bottom: 4px solid #003b6d;
  z-index: 33;
  position: fixed;
  top: 0;
  left: 0px;
  height: 104px;
  width: 100%;

  .header-bottom {
    height: 50%;
    display: flex;
    background-color: white;

    .header-bottom-left {
      width: 50%;
      height: 100%;
      margin-left: 330px;
      display: flex;
      justify-content: flex-start;


      button {
        width: 128px;
        height: 100%;
        color: #a7c7e3;
        font-size: 22px;
        background-color: white;
        border-bottom: none;


      }
    ;

    }
  ;

    .header-bottom-right {
      width: 50%;
      display: flex;
      margin-top: 12px;
      justify-content: flex-end;
      align-items: center;
      cursor: pointer;
      margin-right: 22px;
      font-size: 22px;
    }
  }

  .header-top {
    height: 48%;
    background-color: #003b6d;
    color: #ec9e2c;
    margin-left: 268px;
    text-align: center;
    padding-top: 4px;
  }

}

.roterAll {
  //float: left;

  margin-top: 104px;
  //width: 100%;
  //height: 108vh;
  overflow: hidden;
  //background-color: rgba(0,0,0,0.1);
  //
  //.roterAll-box{
  //  width:98%;
  //  background-color: white;
  //  outline: 1px solid rgba(0,0,0,0.1);
  //  margin: 14px;
  //  //overflow-y:scroll;
  //  height: 108vh;
  //  box-shadow:3px -14px 4px 0px #d5d0d0; /*上边阴影 */
  //}


}

//.roterAll .roterAll-box::-webkit-scrollbar{
//  width: 5px;
//  height:10px;
//  background-color:#b5b1b1
//}
//.roterAll .roterAll-box::-webkit-scrollbar{
//  display: none;
//}
.footer {
  background-color: white;
  text-align: right;
  color: #cccccc;
  width: 100%;
  height: 40px;
  position: fixed;
  left: 0px;
  bottom: 0;
  border: 1px solid;
  padding-right: 30px;
}

.roterAll-change {
  float: left;
  background-color: #409eff;
  margin-top: 104px;
  width: 100%;
  height: 850px;

  .PageBox {
    //float: left;
    display: flex;
    justify-content: space-around;
    //width: 100%;
    height: 100%;
    margin: 28px;
    //overflow-y:scroll;

  }
}
</style>


